<template>
	<view>
		<view class="top">
			<span @click="goback"><</span>
			<span>学习列表</span>
		</view>
		<view class="list">
			<view class="list_item" v-for="(item,index) in list " :key="item.id">
				<view class="left">
					<image :src="item.cover?item.cover:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'" mode=""></image>
				</view>
				<view class="right">
					<p>{{item.title}}</p>
					<p>￥{{item.price}}<font size="3px" color="#ccc">￥{{item.t_price}}</font></p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getList} from "@/api/list.js"
	export default {
		data() {
			return {
				list:[],
				query:{
					page:1,
					limit:10,
				},
				total:0,
				isloading:false
			};
		},
		onLoad: function (options) {
			this.getlist(),
			setTimeout(function () {
				console.log('start pulldown');
			}, 1000);
				uni.startPullDownRefresh();
			},
			onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//上拉加载
			onReachBottom() {
				if(this.query.page<this.total){
					this.query.page++;
					this.getlist()
				}
					
			},
			
		methods:{
			
			getlist(){
				getList(this.query).then(res=>{
					this.isloading=true;
					this.list=[...this.list,...res.data.rows]
					// console.log(this.list);
					console.log(res.data);
					this.total=res.data.count
					// console.log(this.total);
				})
				this.isloading=false
			},
			//返回上一页面
			goback(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},
	}
</script>

<style lang="scss">
.top{
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	font-weight: bold;
	:nth-child(1){
		margin-left: 30rpx;
		font-size: 50rpx;
	}
	:nth-child(2){
		margin-left: 260rpx;
	}
}
.list{
	width: 100%;
	height: 210rpx;
	.list_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		.left{
			width: 300rpx;
			height: 170rpx;
			margin-left: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			width: 400rpx;
			height: 210rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			:nth-child(1){
				font-size: 40rpx;
			}
			:nth-child(2){
				color: red;
				font-size: 40rpx;
			}
		}
	}
}
</style>
